// out: ../css/active.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box {
    width: 400px;
    height: 300px;
    background-color: #4AD3B4;
    margin: 100px auto;
    position: relative;

    .left {
        width: 50px;
        height: 50px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: left 0.7s 2s alternate infinite;
    }

    .right {
        width: 50px;
        height: 50px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: right 0.7s 2s alternate infinite;
    }
}

@keyframes left {
    0% {
        transform: translate(-50%, -50%) translate(-100px);
        background-color: rgba(255, 255, 255, 0.3);
    }

    50% {
        transform: translate(-50%, -50%) translate(0);
        background-color: #fff;
    }

    100% {
        transform: translate(-50%, -50%) translate(100px);
        background-color: rgba(255, 255, 255, 0.3);
    }
}


@keyframes right {
    0% {
        transform: translate(-50%, -50%) translate(100px);
        background-color: rgba(255, 255, 255, 0.3);
    }

    50% {
        transform: translate(-50%, -50%) translate(0);
        background-color: #fff;
    }

    100% {
        transform: translate(-50%, -50%) translate(-100px);
        background-color: rgba(255, 255, 255, 0.3);
    }
}